<template>
    <div>
        <el-card class="box-card">
            <el-row slot="header" :gutter="20" flex="main:center cross:center">
                <el-col :span="3">
                    <el-button size="small" type="primary" @click="add">新增计划</el-button>
                </el-col>
                <el-col :span="12"
                    >时间
                    <el-date-picker type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
                </el-col>
                <el-col :span="6">
                    <el-input v-model="input" placeholder="请输入计划ID">
                        <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="2">
                    <el-button size="small" type="primary">下载报表</el-button>
                </el-col>
            </el-row>
            <el-table :data="listData" border style="width: 100%">
                <el-table-column align="center" label="编号" width="60" type="index"> </el-table-column>
                <el-table-column prop="loginname" align="center" label="投放计划名称" width="90"> </el-table-column>
                <el-table-column prop="nickname" align="center" label="计划ID" width="90"> </el-table-column>
                <el-table-column prop="time" align="center" label="创建时间" width="90"> </el-table-column>
                <el-table-column prop="state" align="center" label="投放状态" width="90"> </el-table-column>
                <el-table-column prop="target" align="center" label="推广目标" width="90"> </el-table-column>
                <el-table-column prop="type" align="center" label="广告类型" width="90"> </el-table-column>
                <el-table-column prop="directional" align="center" label="定向投放" width="90"> </el-table-column>
                <el-table-column prop="material" align="center" label="推广素材" width="90"> </el-table-column>
                <el-table-column prop="AuditStatus" align="center" label="审核状态" width="90"> </el-table-column>
                <el-table-column prop="reason" align="center" label="原因说明" width="90"> </el-table-column>
                <el-table-column prop="quantity" align="center" label="展现数量" width="90"> </el-table-column>
                <el-table-column align="center" label="操作" width="96">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" icon="el-icon-edit" circle @click="edit(scope.$index, scope.row)"></el-button>
                        <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="del(scope.$index, scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="pag" background layout="prev, pager, next" :total="100"> </el-pagination>
        </el-card>
        <el-dialog :title="isEdit ? '编辑' : '新增计划'" :visible.sync="dialogFormVisible" width="60%" center @close="close">
            <el-form :model="form">
                <el-row :gutter="20">
                    <el-col :span="10">
                        <el-form-item label="计划投放名称:" :label-width="formLabelWidth">
                            <el-input v-model="form.loginname" autocomplete="off" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="计划ID:" :label-width="formLabelWidth">
                            <el-input v-model="form.nickname" autocomplete="off" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="创建时间:" :label-width="formLabelWidth">
                            <el-input v-model="form.time" autocomplete="off" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="投放状态:" :label-width="formLabelWidth">
                            <el-input v-model="form.state" autocomplete="off" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="推广目标:" :label-width="formLabelWidth">
                            <el-input v-model="form.target" autocomplete="off" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="广告类型:" :label-width="formLabelWidth">
                            <el-input v-model="form.type" autocomplete="off" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="定向投放:" :label-width="formLabelWidth">
                            <el-input v-model="form.directional" autocomplete="off" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="推广素材:" :label-width="formLabelWidth">
                            <el-input v-model="form.material" autocomplete="off" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="审核状态:" :label-width="formLabelWidth">
                            <el-input v-model="form.AuditStatus" autocomplete="off" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="原因说明:" :label-width="formLabelWidth">
                            <el-input v-model="form.reason" autocomplete="off" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="展现数量:" :label-width="formLabelWidth">
                            <el-input v-model="form.quantity" autocomplete="off" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addOk">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            dialogFormVisible: false,
            formLabelWidth: "100px",
            form: {
                time: "",
                loginname: "",
                nickname: "",
                state: "",
                target: "",
                type: "",
                directional: "",
                material: "",
                AuditStatus: "",
                reason: "",
                quantity: ""
            },
            listData: [],
            input: "",
            isEdit: false,
            editIndex: 0
        };
    },

    mounted() {
        this.getList();
    },

    methods: {
        async getList() {
            var list = await this.$request.get("/list");
            // console.log(list);
            this.listData = list;
        },

        //新增弹框
        add: function() {
            this.dialogFormVisible = true;
            this.isEdit = false;
        },
        //编辑弹框
        edit: function(index) {
            this.form = { ...this.listData[index] };
            this.dialogFormVisible = true;
            this.isEdit = true;
            this.editIndex = index;
        },
        //新增/编辑弹框确定
        async addOk() {
            if (this.isEdit) {
                var editId = this.listData[this.editIndex].id;
                await this.$request.put("/list/" + editId, this.form);
            } else {
                // this.listData.push(this.form);
                await this.$request.post("/list", this.form);
            }
            this.dialogFormVisible = false;
            this.getList();
        },
        //删除
        async del(index) {
            // this.listData.splice(index, 1);
            var deleteId = this.listData[index].id;
            await this.$request.delete("/list/" + deleteId);
            await this.getList();
        },
        //搜索
        async search() {
            var a = await this.$request.get("/list", { params: { nickname: this.input } });
            this.listData = a;
        },
        //清空字符
        close() {
            this.form = {};
        }
    }
};
</script>

<style>
.pag {
    margin-left: 46.7em;
}
</style>
